import { Button, NavBar } from "antd-mobile"
import React from "react"
import { useLocation, useNavigate } from "react-router-dom"
import Myperson from "../../components/MyPerson"
import "./index.css"
import navImg from "../../img/nav.png"
import { RightOutline } from "antd-mobile-icons"
import dayjs from "dayjs"
const Index = () => {
  const navigate = useNavigate()
  const { state } = useLocation()
  // 获取数据
  return (
    <div className="per-container">
      <div className="per-nav">
        <div className="per-nav-tit">
          <img src={navImg} onClick={() => navigate(-1)}></img>
          <h3>选择乘车人</h3>
        </div>
        <div className="per-date-nav">{dayjs().format("MM月DD日")}周二</div>
        <div className="per-tit-box">
          <div className="per-tit-gird">
            <span className="city-sp">{state.startTime}</span>
            <span>D3121</span>
            <span className="city-sp">{state.startTime}</span>
            <span>{state.start}</span>
            <span>1h 12m</span>
            <span>{state.end}</span>
          </div>
        </div>
      </div>

      <div>
        <Myperson></Myperson>
      </div>
      <div className="per-post">
        <span>
          普通预定
          <RightOutline />
        </span>
        <Button block color="primary">
          立即预定
        </Button>
      </div>
    </div>
  )
}

export default Index
